第N个子节点
视频锁定
{$ currentTime | date:'mm:ss' $}
{$ timeLeft | date:'mm:ss' $}
实际上,你可以选择一个元素下的任何第n个子元素; 你只是填写伪类选择后添加括号中子元素所在的序号。例如,
p:nth-child(2) {
color: red;
}
上面的代码是什么意思呢?我们来翻译一下
排在第2位的子元素<p>
,将其文字颜色变成红色!
注意,nth-child(2)
前面的p
是子元素,而nth-child(2)
中的2
是指这个子元素在包含它的父元素中的序号,也就是排第几。
下面自己动手,来试试吧!
说明
设置CSS样式:
- 设置第二个段落字体为草书。
- 设置第三个段落颜色为#CC0000。
- 设置第四个背景颜色为#00FF00。
- 设置第五个段落字体大小为22px。
在线练习
{$ activeFileHint $}